<template>
    <div class="app-main">
        <p class="activeImg">
            <img src="../../assets/image/inviteFriends/banner.png" />
            <img src="../../assets/image/inviteFriends/shareimg.png" style="display:none" id="shareImg"/>
        </p>
        <div class="share-dialog">
            <h1 class="title">推荐有礼</h1>
            <div class="dialog-content">
                <p class="cnt">已成功邀请<span>{{cnt}}</span>人</p>
                <p class="content">分享车享家APP给好友，好友可获得「258元新手大礼包」。好友首次到店消费，您可获得「30元车享家抵价券」</p>
                <p class="btn-wrap">
                    <a href="javascript:void(0)" class="share-btn" v-on:click="toShare" ca="推荐有礼_推荐有礼$邀请好友">邀请好友</a>
                    <a v-bind:href="inviteDetailUrl" class="invite-detail" id="invite-detail" ca="推荐有礼_推荐有礼$邀请详情">邀请详情&nbsp;&gt;</a>
                </p>
            </div>
            <div class="activeContent">
                <p class="rule">活动规则</p>
                <div>
                  <p>分享活动链接给您的朋友，您的朋友点击链接下载车享家APP，可以获得258元养车礼包。当您的朋友到车享家门店完成第一次消费时，您可以获得30元车享家抵价券（不包含普通洗车服务）</p>
                  <p><strong>活动时间：</strong>即日起至2017年12月31日</p>
                  <p><strong>活动对象：</strong><br />
                    被邀请人限从未注册车享账户的新用户；</p>
                  <p><strong>奖励内容：</strong><br />
                    邀请人每成功邀请一个好友下载车享家APP注册车享账户并到店消费，可获得30元车享家抵价券；</p>
                	<p><strong>发放方式：</strong><br />
                    达到奖励标准后，抵价券将于2小时内到账，邀请人可至我的-优惠券查看奖励；</p>
                    <p><strong>券有效期：</strong><br />
                   自领取之日起30日内有效；详细券规则可至我的-优惠券查看；</p>

                  <p>如有任何疑问，详询车享家客服热线：<br />4008-020-666</p>
                </div>
            </div>
        </div>
        <div class="alert" id="alert">
            <p class="content">{{alertContent}}</p>
            <span class="btn" v-on:click="alertHide" ca="推荐有礼_推荐有礼$确定">确定</span>
        </div>
    </div>
</template>

<style lang="scss">
    @import '../../assets/css/common.scss';

    .bottomfix {
        position: fixed;
        bottom: 0;
        width: 100%;
        max-width: 750px;
        z-index: 333;
    }

    /*大图提前加载*/
    body:after {
        content: url("../../assets/image/inviteFriends/loading.gif");
        display: none;
    }

    /*活动*/
    body {
        background-color: #fff;
    }

    .app-main {
        position: relative;
        height: auto;
    }

    .app-main img{
        width: 100%;
    }

    .app-main .share-dialog {
        padding-bottom: 2rem;
        /*padding: 1.5rem 2rem 1rem 2rem;*/
        /*background-color: #fff;
        border-radius: .2rem;
        box-shadow: 0 .35rem .5rem 0 rgba(0, 0, 0, .2);*/
        width: 84%;
        position: absolute;
        left: 8%;
        top: 1.6rem;
    }

    .app-main .share-dialog .title {
        padding-bottom: 1.6rem;
        font-size: 1.8rem;
        line-height: 1;
        color: #fff;
        text-align: center;
    }

    .app-main .share-dialog .dialog-content {
        padding: 1.5rem 2rem 1rem 2rem;
        background-color: #fff;
        border-radius: .2rem;
        box-shadow: 0 .35rem .5rem 0 rgba(0, 0, 0, .2);
        /*width: 84%;
        position: fixed;
        left: 8%;
        top: 4rem;*/
    }

    .app-main .share-dialog .dialog-content .cnt {
        font-size: 1rem;
        text-align: center;
    }

    .app-main .share-dialog .dialog-content .cnt span {
        padding: 0 .3rem;
        color: #d0021b;
        display: inline-block;
    }

    .app-main .share-dialog .dialog-content .content {
        padding-top: 1rem;
        font-size: .8rem;
        color: #8392a0;
        line-height: 1.7;
    }

    .app-main .share-dialog .dialog-content .btn-wrap {
        margin-top: 1rem;
    }

    .app-main .share-dialog .dialog-content .btn-wrap a {
        text-align: center;
        display: block;
    }

    .app-main .share-dialog .dialog-content .share-btn {
        background: #fe3939;
        box-shadow: inset 0 -.15rem 0 0 rgba(0, 0, 0, .2);
        border-radius: .25rem;
        font-size: .85rem;
        color: #fff;
        line-height: 2.2rem;
        height: 2.2rem;
    }

    .app-main .share-dialog .dialog-content .invite-detail {
        margin-top: 1rem;
        padding: .3rem 0;
        color: #333;
        font-size: .7rem;
        text-decoration: underline;
        position: relative;
    }

    .app-main .share-dialog .activeContent {
        font-size: .7rem;
        line-height: 1.5;
        color: #8392a0;
    }

    .app-main .share-dialog .activeContent .rule {
        padding: 2rem 0 1rem 0;
        text-align: center;
        font-size: 1rem;
        font-weight: bold;
        line-height: 1;
        color: #333;
    }

    .app-main .share-dialog .activeContent div > p{
        padding-bottom: .75rem;
        color: #333;
    }

    .alert {
        padding: 1rem 0;
        border-radius: .3rem;
        background-color: #fff;
        color: #333;
        position: fixed;
        left: 10%;
        top: 20%;
        width: 80%;
        display: none;
        z-index: 1000;
    }
    .alert p.content {
        padding: 0 1rem 1rem;
        min-height: 3rem;
        line-height: 1.5;
        font-size: .8rem;
    }
    .alert span.btn{
        padding-top: 1rem;
        display: block;
        text-align: center;
        border-top: 1px solid #03a9f4;
        line-height: 1;
    }
    .mask {
        background-color: rgba(0,0,0,.4);
        position: fixed;
        left: 0;
        top: 0;
        width: 100%;
        height: 200%;
        z-index: 999;
        display: none;
    }
</style>
<script>
    import common from "../../assets/js/common.js";
    export default {
        data: function () {
            return {
                cnt: '', //分享用户数
                userFlag: '',  //新老用户标识:1老用户,0新用户
                inviteDetailUrl: '',
                shareUid:'',
                shareMobile:'',
                shareImg:'',
                alertContent:''
            };
        },
        mounted: function () {
            //this.getUid();
            //this.getGuide();
            this.getConsumption();
            //打点
            common.ANA_AnalyticsScan();
        },
        methods: {
            getConsumption: function(){
                this.userFlag = '1';
                this.getUid();
                this.setInviteDetailUrl();

                // this.$http.post(common.isdev() + '/guide/isConsumptioned/0.htm').then(function(response){
                //     var result = response.data.result;
                //     if (result == 0 || result == -99) {
                //         this.userFlag = '0';
                //         this.cnt = '0';
                //     } else {
                //         this.userFlag = '1';
                //         this.getUid();
                //     }

                //     this.setInviteDetailUrl();
                    
                // },function(response){
                //     this.userFlag = '0';
                //     this.setInviteDetailUrl();
                // });

            },
            getUid: function () { //获取用户uid
                var _this = this;
                lb.getUserInfo(function (data) {
                    var uid = data.text.UID;
                    var mobile = data.text.tel;

                    window.sessionStorage.setItem('lbUID',uid);
                    _this.shareUid = uid;
                    _this.shareMobile = mobile;
                    _this.getGuide(uid);
                });
                //this.getGuide('11gZoR1LHYJFo8xv1d6y5g==');
            },
            getGuide: function (uid) {  //获取用户邀请信息
                //get body data
                var _uid = uid;
/*                this.$http.post(common.isdev() + '/guide/isConsumptioned/0.htm').then(response => {
                    var result = response.data.result;
                    if (result == 0 || result == -99) {
                        this.userFlag = '0';
                        this.cnt = '0';
                    } else {
                        this.userFlag = '1';
                        this.$http.post(common.isdev() + '/guide/getGuidePage/0.htm', {'cxid':_uid}).then(response => {
                            if(response.data.result == 1){
                              this.cnt = response.data.obj.cnt;
                            }
                        }, response => {
                            //error callback
                        });
                    }
                    this.setInviteDetailUrl();
                }, response => {
                    this.userFlag = '0';
                    //error callback
                });*/
                this.$http.post(common.isdev() + '/guide/getGuidePage/0.htm', {'cxid':_uid}).then(response => {
                    if(response.data.result == 1){
                        this.cnt = response.data.obj.cnt;
                    }
                }, response => {
                  //error callback
                });
            },
            setInviteDetailUrl: function () {  //设置用户邀请详情页
                var userFlag = this.userFlag;
                var url = common.path() + '/invitefriends/invitedetail/invitedetail.' + common.isHtml() + '?userFlag=' + userFlag;
                this.inviteDetailUrl = url;
            },
            toShare: function () {  //设置分享着陆页
                var _shareUid = this.shareUid, _shareMobile = this.shareMobile;
                var imgEl = document.getElementById("shareImg");
                var _shareImg = imgEl.getAttribute('src');
                //var _temp = this.userFlag;
                var maskEl = document.getElementById('mask');
                var alertEl = document.getElementById('alert');
                // if (this.userFlag == '0') {  //新老用户标识为0时提示去门店消费
                //     this.alertContent = 'Hi，你还未在车享家消费过，先体验下我们的服务再推荐给好友吧';
                //     alertEl.setAttribute('style','display:block;');
                //     maskEl.setAttribute('style','display:block;');
                // } else {
                    //调用微信分享接口

                    lb.shareInfo({
                        url: window.location.origin + common.path() + "/invitefriends/quickregist/quickregist.shtml?shareUid=" + _shareUid,
                        title: "车享家258元大礼包",
                        content: "车享家258元大礼包",
                        imgUrl: 'https://s1.cximg.com/msweb02/cx/cxj/cxjweb/static/image/shareimg.png'
                    });
                //}
            },
            alertHide: function(){
                var maskEl = document.getElementById('mask');
                var alertEl = document.getElementById('alert');
                var _showFlag = alertEl.style.display;
                if (_showFlag == 'block') {
                    alertEl.setAttribute('style','display:none;');
                    maskEl.setAttribute('style','display:none;');
                }
            }
        }
    }
</script>
